<template>
    <div class="main-container">
        <zl-table ref="roleTable" :request-fun="this.api.system.getRolesAll" @rowClick="roleRowClick">
            <div slot="operate">
                <el-button @click="addDialog = true">新增</el-button>
            </div>
            <zl-table-column label="名称" prop="name"/>
            <zl-table-column label="中文名" prop="nameZh"/>
            <zl-table-column label="中文名" prop="nameZh"/>
            <el-table-column
                    fixed="right"
                    min-width="100px"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="delRole(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </zl-table>

        <el-dialog
                title="提示"
                :visible.sync="addDialog"
                width="30%">
            <div class="addDialogCon">
                <el-form :model="roleForm" :rules="roleRules" ref="roleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="角色编号" prop="name">
                        <el-input v-model="roleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称" prop="nameZh">
                        <el-input v-model="roleForm.nameZh"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addRole()">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "SysRole",
    data: function () {
        return {
            //接口api
            api: this.$store.getters.app.api,
            //新增弹框按钮状态
            addDialog: false,
            //角色对象
            roleForm: {
                name: null,
                nameZh: null
            },
            roleRules: {
                name: [
                    {required: true, message: '请输入角色编号', trigger: 'blur'}
                ],
                nameZh: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        //新增一个角色
        async addRole() {
            await this.$refs.roleForm.validate(async (valid) => {
                if (valid) {
                    let res = await this.api.system.addRole(this.roleForm);
                    if (res.code == 200) {
                        await this.$refs.roleTable.refresh()
                        this.addDialog = false
                    }
                } else {
                    return false;
                }
            });
        },
        //删除一个角色
        async delRole(rid){
            await this.$confirm("是否确认删除此角色？", "删除提示", {
                confirmButtonText: "确定",
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await this.api.system.delRole({rid: rid})
                await this.$refs.roleTable.refresh()
            })
        },
        //点击表格行
        async roleRowClick(data){
            //console.log(data,"ssssssssssssssss")
            let menuIds = data.menus.map(item => item.id)
            this.$bus.$emit('toggleRowSelectionByIds', menuIds,data.id)
        }
    }
}
</script>

<style scoped>
.main-container {
    width: 100%;
    height: 100%;
}
</style>